<template>
  <div>
    <custom-title :is-line="true" title="企业能源信息" />
    <div class="qynyxx">
      <div v-for="(item, index) in descList" :key="index + 'base'">
        <custom-details-item :icon="item.icon" :label="item.label" :value="item.value" />
      </div>
    </div>
    <custom-title :is-line="true" title="企业能源管理体系认证情况" />
    <div class="qynygltxrzqk">
      <div v-for="(item, index) in descList1" :key="index + 'all'">
        <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''">
          <template #valueSlot>
            <span v-if="item.fieldName !== 'certifyAttachList'">{{ item.value }}</span>
            <div v-else>
              <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
            </div>
          </template>
        </custom-details-item>
      </div>
    </div>
    <attach-pop-up ref="attachPopUp" file-name-key="fileName" file-url-key="fileUrl" />
  </div>
</template>

<script>
import { companyInfoEnergySources } from '@/api/enterprise'
import commonList from '@/assets/mixin/commonList'
import AttachPopUp from '@/components/globals/attachPopUp.vue'

export default {
  name: 'EnergySourcesComponent',
  components: { AttachPopUp },
  inject: ['layout'],
  mixins: [commonList],
  props: {
    companyId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      companyName: '',
      descList: [
        {
          label: '集团分级评价等级',
          value: '',
          icon: '&#xe6f7;',
          fieldName: 'groupRateLevel'
        },
        {
          label: '能源管理人',
          value: '',
          icon: '&#xe700;',
          fieldName: 'energyHead'
        },
        {
          label: '是否重点用能单位',
          value: '',
          icon: '&#xe790;',
          fieldName: 'isEnergy'
        },
        {
          label: '能源管理人员数量',
          value: '',
          icon: '&#xe61c;',
          fieldName: 'energyPersonCount'
        },
        {
          label: '联系电话',
          icon: '&#xe60a;',
          value: '',
          fieldName: 'energyHeadPhone'
        },
        {
          label: '天然气系数',
          icon: '&#xe669;',
          value: '',
          fieldName: 'natgasRatio'
        },
        {
          label: '电力排放因子',
          icon: '&#xe669;',
          value: '',
          fieldName: 'electricDivisor'
        }
      ],
      descList1: [
        {
          label: '是否通过能源管理体系认证',
          value: '',
          icon: '&#xe6f7;',
          fieldName: 'isPassEnergy'
        },
        {
          label: '证书初领日期',
          value: '',
          icon: '&#xe617;',
          fieldName: 'receiveTime'
        },
        {
          label: '证书有效期（起）',
          value: '',
          icon: '&#xe685;',
          fieldName: 'certifyStarTime'
        },
        {
          label: '证书有效期（止）',
          value: '',
          icon: '&#xe685;',
          fieldName: 'certifyEndTime'
        },
        {
          label: '能源管理体系认证证书',
          value: '',
          icon: '&#xe685;',
          fieldName: 'certifyAttachList'
        }
      ]
    }
  },
  mounted() {
    this.companyInfoEnergySources()
  },
  methods: {
    // 获取企业详情数据--基本信息
    async companyInfoEnergySources() {
      this.layout.showAreaLoading(['.qynyxx', '.qynygltxrzqk'])
      const { status, data } = await companyInfoEnergySources({ companyId: this.companyId })
      if (status === 0 && data) {
        this.companyName = data.companyName
        this.descList.forEach((v) => {
          v.value = data[v.fieldName] ? data[v.fieldName] : ''
        })
        this.descList1.forEach((v) => {
          v.value = data[v.fieldName] ? data[v.fieldName] : ''
        })
      }
      this.layout.hideAreaLoading(['.qynyxx', '.qynygltxrzqk'])
    }
  }
}
</script>

<style scoped lang="scss"></style>
